<template>
  <view class="navbar-outer-container">
    <view class="navbar-container">
      <view class="address" v-if="isShowAddress">
        <text class="iconfont icon-31dingwei"></text>
        <text class="name">广州市</text>
      </view>
      <view class="back iconfont icon-fanhui" v-else @click="back"></view>
      <image @click="toHome" src="../static/images/logo.png" class="logo" />
      <view class="right">
        <text
          class="search iconfont icon-31sousuo"
          v-show="isShowSearch"
          @click="toSearch"
        ></text>
        <text
          class="other iconfont icon-fenlei"
          @click="$bus.$emit('showAside')"
        ></text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'NavBar',
  data() {
    return {
      isShowAddress: false,
      isShowSearch: true,
    }
  },
  methods: {
    back() {
      const pageArr = getCurrentPages()
      const path = pageArr[pageArr.length - 1].route
      /**
       * 在购物车无法回退上一个页面，
       * 因为switchTab会关闭所有非tabbar页面，
       * 而在购物车时，底部tabbar也会隐藏
       */
      if (path === 'pages/cart/cart') {
        return uni.switchTab({
          url: '/pages/home/home',
        })
      }
      uni.navigateBack({
        delta: 1,
      })
    },
    toSearch() {
      uni.navigateTo({
        url: '/pages/search/search',
      })
    },
    toHome() {
      uni.switchTab({
        url: '/pages/home/home',
      })
    },
  },
  mounted() {
    // 获取当前页面的路径
    const pageArr = getCurrentPages()
    const path = pageArr[pageArr.length - 1].route
    // 根据路径判断是否为购物车或个人中心，显示返回按钮
    const arr = ['pages/home/home', 'pages/category/category']
    if (arr.includes(path)) {
      this.isShowAddress = true
    }
    'pages/search/search'.includes(path) && (this.isShowSearch = false)
  },
}
</script>

<style lang="scss">
.navbar-outer-container {
  height: 120upx;

  .navbar-container {
    position: fixed;
    background-color: #fff;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    height: 120upx;
    padding: 0 20upx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .iconfont {
      font-size: $lxins-fs-18;
      color: #999;
    }
    .address {
      height: 100%;
      line-height: 120upx;
      font-size: 32upx;
      color: #999;
      .name {
        margin-left: 12upx;
        font-size: $lxins-fs-16;
      }
    }
    .back {
      width: 50upx;
      height: 100%;
      line-height: 120upx;
      text-align: center;
    }
    .logo {
      width: 160upx;
      height: 30upx;
    }
    .right {
      height: 120upx;
      line-height: 120upx;
      .search {
        margin-right: 12rpx;
      }
      text {
        width: 60upx;
        height: 100%;
        text-align: center;
        display: inline-block;
      }
    }
  }
}
</style>
